<template>
  <view class="adetailPage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">确认订单</view>
      </view>
    </shopro-navbar>
    <view class="card">
      <view class="cardTop">
        <view class="cardR">
          <view class="cardright">
            <view class="name">
              经纪人
              <view class="money">¥{{ price }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="total">
        <view class="totalbox">合计：</view>
        <view class="price">¥{{ price }}</view>
      </view>
    </view>
    <!-- 支付方式 -->
    <view class="cardPay">
      支付方式
      <view class="payType">
        <u-radio-group v-model="payValue" @change="radioGroupChange">
          <u-radio
            @change="radioChange"
            active-color="#EF7700"
            v-for="(item, index) in paydata"
            :key="index"
            :name="item.name">
            {{ item.name }}
            <image class="imgs" :src="item.img" mode="widthFix"></image>
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <!-- 填写 -->
    <view class="fillMsg">
      <view class="name">填写信息</view>
      <view class="msg" @click="handcity">
        城市

        <view>
          {{ area_text }}
          <image
            class="imgs"
            src="/static/images/finance/more.png"
            mode="widthFix"></image>
        </view>
      </view>
      <view class="msg">
        手机号
        <u-input
          v-model="value"
          :type="type"
          placeholder-style="color:#999"
          placeholder="成为会员时预留的手机号码"
          input-align="right"
          maxlength="11" />
      </view>
      <view class="hite">
        <image
          class="imgs"
          src="/static/images/finance/hit.png"
          mode="widthFix"></image>
        {{ title1 }}
      </view>
    </view>
    <view class="card">
      <view class="name">经纪人权益</view>
      <view class="smallname">
        {{ title2 }}
      </view>
    </view>
    <!-- footer -->
    <view class="footer">
      <view class="footerLeft">
        实付：
        <view class="footerMoney">¥{{ price }}</view>
      </view>
      <view class="footerRight" @click="handPay">去付款</view>
    </view>
    <!-- 省市区选择器 -->
    <u-select
      mode="mutil-column-auto"
      safe-area-inset-bottom
      :list="addressAreaList"
      v-model="showSelect"
      @confirm="regionConfirm"></u-select>
	  <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      list: [],
      current: 0,
      collect: true,
      show: false,
      currId: 0,
      paydata: [
        {
          name: "微信",
          img: require("../../static/images/finance/wx.png"),
        },
        {
          name: "积分",
          img: require("../../static/images/finance/jf.png"),
        },
      ],
      payValue: "",
      value: "",
      type: "text",
      border: true,
      price: "",
      showSelect: false, //省市区
      addressAreaList: [],
      area_text: "",
      newId: "",
      title1: "",
      title2: "",
      cId: "",
      loaded: true,
    };
  },
  props: {},
  onLoad(params) {
    this.price = params.price;
    this.newId = params.id;
    this.cId = params.cId;
    console.log(params);
    this.getHite();
    this.getArea();
    uni.showToast({
      title: "加载中",
      icon: "loading",
      duration: 100000,
      mask: true,
    });
  },
  computed: {},
  created() {
    this.getArea();
  },

  methods: {
    change(index) {
      this.current = index;
    },
    handcity() {
      this.showSelect = true;
      // this.getArea();
    },
    getHite() {
      this.$new_http("finance.beginJjr").then((res) => {
        console.log(res.data);
        this.title1 = res.data.title1;
        this.title2 = res.data.title2;
      });
    },
    // 获取省市区
    getArea() {
      this.$http("address.area").then((res) => {
        if (res.code === 1) {
          uni.hideToast();
          let { provinceData, cityData, areaData } = res.data;
          provinceData.forEach((item, index) => {
            this.addressAreaList.push({ ...item, children: [] });
            this.addressAreaList[index].children.push(...cityData[index]);
            this.addressAreaList[index].children.forEach((item1, index1) => {
              item1["children"] = [];
              item1.children.push(...areaData[index][index1]);
            });
          });
        }
      });
    },
    // 确认省市区
    regionConfirm(e) {
      this.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
    },

    handleDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/detail?val=" + JSON.stringify(val),
      });
    },
    // 查看更多
    goMore(val) {
      uni.navigateTo({
        url: "/pages/finance/more?type=" + val,
      });
    },
    getStatus() {
      this.collect = !this.collect;
    },
    // 成为会员
    gocome(index) {
      this.currId = index;
    },

    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    handPay() {
      var that = this;
      console.log(this.payValue);
      if (!this.payValue) {
        return uni.showToast({
          title: "请选择支付方式",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      }
      this.$new_http("finance.doMember", {
        teacher_id: this.newId,
        pay_type: this.payValue == "微信" ? "1" : "2",
        phone: this.value,
        city_area: this.area_text,
        order_type: "2",
        // vip_id: this.cId,
      }).then((res) => {
        if (res.code == 1) {
          if (this.payValue == "微信") {
            // 调起微信支付
            wx.requestPayment({
              timeStamp: res.data.data.timeStamp,
              nonceStr: res.data.data.nonceStr,
              package: res.data.data.package,
              signType: res.data.data.signType,
              paySign: res.data.data.paySign,
              success: function (ress) {
                uni.showToast({
                  title: "支付成功",
                  icon: "none", //如果要纯文本，不要icon，将值设为'none'
                  duration: 2000, //持续时间为 2秒
                });
                let st = setTimeout(function () {
                  clearTimeout(st);
                  // uni.navigateTo({
                  //   url: "/pages/finance/playback?id=" + that.newId,
                  // });
                  uni.$emit('updateData', "back")
                  uni.navigateBack({
                  	delta: 1
                  })
                }, 2000);
              },
              fail: function (ress) {
                uni.showToast({
                  title: "取消支付",
                  icon: "none", //如果要纯文本，不要icon，将值设为'none'
                  duration: 2000, //持续时间为 2秒
                });
              },
              complete: function (ress) {
                console.log(ress, 3);
              },
            });
          } else {
            uni.showToast({
              title: "支付成功，正在跳转",
              icon: "none",
              duration: 1500,
              mask: true,
            });
            let st = setTimeout(function () {
              clearTimeout(st);
              // 跳到播放页面
			  uni.$emit('updateData', "back")
			  uni.navigateBack({
			  	delta: 1
			  })
			  // uni.navigateTo({
			  //   url: "/pages/finance/teacherDetail?val=" + val.newId,
			  // });
              // uni.navigateTo({
              //   url: "/pages/finance/playback?id=" + that.newId,
              // });
            }, 2000);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.adetailPage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .card {
    width: 100%;
    // height: 390rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    margin-top: 2rpx;
    box-sizing: border-box;

    .cardTop {
      display: flex;

      .imgs {
        width: 201rpx;
        height: 141rpx;
      }

      .become {
        width: 380rpx;
        height: 84rpx;
        background: #ed861f;
        border-radius: 42rpx;
        font-family: PingFang;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 84rpx;
        margin-left: 30rpx;
        margin-top: 49rpx;
        text-align: center;

        .small {
          font-size: 24rpx;
          color: #ffffff;
          line-height: 84rpx;
          opacity: 0.8;
        }
      }
    }

    .cardR {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .name {
      font-family: PingFang;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      display: flex;
      justify-content: space-between;
    }
    .smallname {
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
      line-height: 60rpx;
      margin-top: 46rpx;
    }
    .cardright {
      width: 100%;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;

      .money {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        display: flex;
        justify-content: space-between;
      }

      .type {
        margin-left: 31rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #666666;
        margin-top: 28rpx;
      }
    }
  }

  .total {
    width: 100%;

    font-weight: 500;
    font-size: 26rpx;
    color: #666666;
    margin-top: 63rpx;
    display: flex;
    align-items: center;
    text-align: right;

    .totalbox {
      margin-left: auto;
      margin-right: 0;
    }

    .price {
      font-weight: bold;
      font-size: 32rpx;
      color: #ef7700;
    }
  }
  .cardPay {
    width: 750rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    box-sizing: border-box;
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    .payType {
      ::v-deep .u-radio__label {
        color: #000;
      }
      .imgs {
        width: 36rpx;
        margin-left: 6rpx;
        position: relative;
        top: 4rpx;
      }
    }
  }
  .fillMsg {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    .name {
      font-family: PingFang;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      display: flex;
      justify-content: space-between;
    }
    .msg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      margin-top: 48rpx;
      border-bottom: 1rpx #e4e4e4 solid;
      padding-bottom: 20rpx;
      .imgs {
        width: 17rpx;
      }
    }
    .hite {
      padding-right: 68rpx;
      margin-top: 25rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #ff0000;
      line-height: 40rpx;
      .imgs {
        width: 26rpx;
        margin-right: 10rpx;
        vertical-align: baseline;
      }
    }
  }
  .footer {
    width: 750rpx;
    height: 92rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    .footerLeft {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      padding-left: 44rpx;
      color: #666;
      .footerMoney {
        color: #ed861f;
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .footerRight {
      width: 250rpx;
      height: 92rpx;
      background: #ed861f;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }
  }
}
</style>
